import { View, Text, TouchableOpacity, StyleSheet } from "react-native"
import { BookmarkIcon, Check } from "lucide-react-native"
import { theme } from "../../constants/theme"
import { Platform } from "react-native"

interface WordStatusBarProps {
    currentStatus: "new" | "learning" | "mastered"
    isFavorite: boolean
    onUpdateStatus: (status: "new" | "learning" | "mastered") => void
    onToggleFavorite: () => void
}

export function WordStatusBar({ currentStatus, isFavorite, onUpdateStatus, onToggleFavorite }: WordStatusBarProps) {
    // 获取状态按钮样式
    const getStatusButtonStyle = (status: "new" | "learning" | "mastered") => {
        const isActive = currentStatus === status

        const baseColors = {
            new: { active: "#FF9999", inactive: "#FFF1F1" },
            learning: { active: "#FF9500", inactive: "#FFF4E5" },
            mastered: { active: "#99CC99", inactive: "#F1FFF1" },
        }

        return {
            backgroundColor: isActive ? baseColors[status].active : baseColors[status].inactive,
            borderWidth: 2,
            borderColor: isActive ? baseColors[status].active : "transparent",
        }
    }

    return (
        <View style={styles.statusContainer}>
            <View style={styles.statusButtons}>
                <TouchableOpacity
                    style={[styles.statusButton, getStatusButtonStyle("new")]}
                    onPress={() => onUpdateStatus("new")}
                >
                    {currentStatus === "new" && (
                        <View style={styles.checkmarkContainer}>
                            <Check size={12} color="#fff" />
                        </View>
                    )}
                    <Text
                        style={[
                            styles.statusButtonText,
                            { color: currentStatus === "new" ? theme.colors.neutral.white : "#FF9999" },
                        ]}
                    >
                        生词
                    </Text>
                </TouchableOpacity>

                <TouchableOpacity
                    style={[styles.statusButton, getStatusButtonStyle("learning")]}
                    onPress={() => onUpdateStatus("learning")}
                >
                    {currentStatus === "learning" && (
                        <View style={styles.checkmarkContainer}>
                            <Check size={12} color="#fff" />
                        </View>
                    )}
                    <Text
                        style={[
                            styles.statusButtonText,
                            { color: currentStatus === "learning" ? theme.colors.neutral.white : "#FF9500" },
                        ]}
                    >
                        学习中
                    </Text>
                </TouchableOpacity>

                <TouchableOpacity
                    style={[styles.statusButton, getStatusButtonStyle("mastered")]}
                    onPress={() => onUpdateStatus("mastered")}
                >
                    {currentStatus === "mastered" && (
                        <View style={styles.checkmarkContainer}>
                            <Check size={12} color="#fff" />
                        </View>
                    )}
                    <Text
                        style={[
                            styles.statusButtonText,
                            { color: currentStatus === "mastered" ? theme.colors.neutral.white : "#99CC99" },
                        ]}
                    >
                        掌握
                    </Text>
                </TouchableOpacity>

                <TouchableOpacity
                    style={[styles.favoriteButton, isFavorite && styles.favoriteButtonActive]}
                    onPress={onToggleFavorite}
                >
                    <BookmarkIcon
                        size={20}
                        color={isFavorite ? theme.colors.neutral.white : "#8B5CF6"}
                        fill={isFavorite ? "#8B5CF6" : "none"}
                    />
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    statusContainer: {
        width: "100%",
    },
    statusButtons: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
    statusButton: {
        flex: 1,
        paddingVertical: theme.spacing.sm,
        borderRadius: theme.borderRadius.medium,
        alignItems: "center",
        justifyContent: "center",
        marginHorizontal: theme.spacing.xs,
        flexDirection: "row",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.2,
                shadowRadius: 2,
            },
            android: {
                elevation: 1,
            },
        }),
    },
    statusButtonText: {
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.semiBold,
    },
    checkmarkContainer: {
        marginRight: theme.spacing.xs,
        backgroundColor: "rgba(255, 255, 255, 0.3)",
        width: 16,
        height: 16,
        borderRadius: 8,
        alignItems: "center",
        justifyContent: "center",
    },
    favoriteButton: {
        width: 36,
        height: 36,
        borderRadius: 18,
        backgroundColor: "#F3E8FF",
        alignItems: "center",
        justifyContent: "center",
        marginLeft: theme.spacing.sm,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.2,
                shadowRadius: 2,
            },
            android: {
                elevation: 1,
            },
        }),
    },
    favoriteButtonActive: {
        backgroundColor: "#8B5CF6",
    },
})

